<!-- 展示评论的一个组件 -->
<template>
	<view class="comment-item">
		<view class="comment-item__user-info flex">
			<image :src="data.avatar" mode="aspectFill" class="comment-item__user-avatar"></image>
			<view class="flex-column">
				<view>
					<text class="comment-item__user-name">{{ data.name }}</text>
					<image :src="data.gender" mode="aspectFill" class="comment-item__user-gender"></image>
				</view>
				<text class="comment-item__user-post-time">{{ data.date }}</text>
			</view>
		</view>
		
		<!-- 内容展示部分 -->
		<view class="comment-item__content">
			{{ data.content }}
		</view>
		
		<!-- 点赞部分 -->
		<view class="comment-item__interaction flex">

			<view class="comment-item__interaction-like flex-column"
			@tap="toggleLikeIcon"
			>
				<image src="/static/images/like.png" mode="aspectFill" class="comment-item__interaction-icon" v-show="!likeIconActive"></image>
				<image src="/static/images/like--active.png" mode="aspectFill" class="comment-item__interaction-icon" v-show="likeIconActive"></image>
			</view>
			
			<view class="comment-item__interaction-dislike flex-column"
			@tap="toggleDisLikeIcon"
			>
				<image src="/static/images/dislike.png" mode="aspectFill" class="comment-item__interaction-icon" v-show="!disLikeIconActive"></image>
				<image src="/static/images/dislike--active.png" mode="aspectFill" class="comment-item__interaction-icon" v-show="disLikeIconActive"></image>
			</view>
			
			<view class="comment-item__interaction-reply flex-column">
				<image src="/static/images/comment.png" mode="aspectFill" class="comment-item__interaction-icon"></image>
			</view>

		</view>
		
		<!-- 回复部分 -->
		<!-- <slot name="reply"></slot> -->
<!-- 		<view class="comment-item__reply" @click="onClickReply">
			<view class="comment-item__reply-item">
				<text class="comment-item__reply-name">棉花糖2304：</text>
				<text>是呀</text>
			</view>
			
			<view class="comment-item__reply-count flex" v-if="replyItems.length>1">
				<text>共2条回复</text>
				<image class="comment-item__reply-icon" src="/static/images/rightArrow.png" mode="aspectFill"></image>
			</view>
		</view> -->
	</view>
	
	<slot name="line"></slot>
</template>

<script setup>
	import { nextTick, onMounted, ref, useAttrs } from 'vue';

	const props = defineProps({
		data: {
			type: Object,
			default: () => ({})
		}
	})
	// 论坛部分
	const attrs = useAttrs()
	// const emit = defineEmits(['replyDetail'])
	// 论坛点赞图标是什么状态：激活还是未激活
	const likeIconActive = ref(false);
	
	const disLikeIconActive = ref(false)
	
	const replyItems = ref([1,2])
	
	function toggleLikeIcon(){
		if(likeIconActive.value){
			likeIconActive.value = false;
		}else{
			likeIconActive.value = true;
		}
	}
	
	function toggleDisLikeIcon(){
		if(disLikeIconActive.value){
			disLikeIconActive.value = false;
		}else{
			disLikeIconActive.value = true;
		}
	}
	
	// function onClickReply(){
	// 	emit('replyDetail')
	// }
	onMounted(()=>{
		nextTick(()=>{
			if(attrs){
				console.log(attrs.value);
			}
		})
	})
</script>

<style lang="scss" scoped>
.comment-item{
	margin: 0 auto;
	margin-bottom: 30rpx;
	&__user{
		&-info{
			margin-top: 20rpx;
			margin-bottom: 18rpx;
		}
		
		&-avatar{
			width: 50rpx;
			height: 50rpx;
			margin-right: 18rpx;
		}
		
		&-name{
			font-size: 24rpx;
		}
		
		&-gender{
			width: 18rpx;
			height: 18rpx;
			margin-left: 5rpx;
		}
		
		&-post-time{
			font-size: 18rpx;
			color: #333333;
		}
	}
	
	&__content{
		width: 586rpx;
		margin-left: 68rpx;
		margin-bottom: 12rpx;
		font-size: 24rpx;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		overflow: hidden;
		-webkit-box-orient: vertical;
	}
	
	// 互动部分
	&__interaction{
		margin-left: 68rpx;
		margin-bottom: 16rpx;
		&-like{
			margin-right: 15rpx;
			align-items: center;
		}
		
		&-dislike{
			margin-right: 15rpx;
			align-items: center;
		}
		
		&-reply{
			margin-right: 9rpx;
			align-items: center;
		}
		
		&-icon{
			width: 30rpx;
			height: 30rpx;
		}
	}
	
	// 回复部分
	&__reply{
		width: 586rpx;
		box-sizing: border-box;
		padding: 12rpx 0;
		padding-left: 18rpx;
		margin-left: 68rpx;
		background-color: #f2f2f2;
		border-radius: 5rpx;
		&-item{
			font-size: 24rpx;
			color: #333333;
			margin-bottom: 12rpx;
		}
		
		&-name{
			color: #608ec5;
		}
		
		&-count{
			font-size: 18rpx;
			color: #797979;
		}
		
		&-icon{
			width: 12rpx;
			height: 12rpx;
		}
	}
}
</style>
